<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script th:replace="common/head::static"></script>
    <script th:src="@{/common/nprogress/nprogress.js}"></script>
    <link rel='stylesheet' th:href="@{/common/nprogress/nprogress.css}"/>
    <style>
        body{
            text-align: center;
        }
        iframe{
            right: -100%;
            position: absolute;
        }
    </style>
</head>
<body>
<!-- 头部 -->
<header class="huanzi-header">
    <!-- 系统状态栏占高 -->
    <div class="statusbar"></div>
    <!-- 标题栏 -->
    <div class="titlebar">
        <!-- 左边返回按钮 -->
        <a class="huanzi-header-back mui-icon mui-icon-left-nav mui-pull-left" style="display: none;"></a>
        <h1 class="mui-title"></h1>
        <!-- 右边按钮集合 -->
        <div class="huanzi-header-right-button-list"></div>
    </div>
</header>

<!-- 内容（可滑动区域） -->
<div class="huanzi-content mui-scroll-wrapper">
    <!-- 点击立即加载初始url -->
    <div id="refreshContainer"  class=" mui-scroll" th:if="${switchMode} eq '1'">
        <!-- 直接嵌入iframe，且自适应宽高 -->
        <iframe id="iframe" name="iframe" frameborder="0" width="100%"></iframe>
    </div>
    <!-- 切换仅回显页面，在当前页面点击才加载 -->
    <div class=" mui-scroll" th:if="${switchMode} eq '2'">
        <!-- 直接嵌入iframe，且自适应宽高 -->
        <iframe th:each="buttom,iterStat : ${buttomList}" th:id="'iframe' + ${iterStat.count}" th:name="'iframe' + ${iterStat.count}" frameborder="0" width="100%"></iframe>
    </div>
</div>

<!-- 底部导航栏 -->
<footer class="huanzi-footer">
    <div class="huanzi-footer-buttom" th:each="buttom,iterStat : ${buttomList}" th:data-iframe="'iframe' + ${iterStat.count}" th:data-url="${buttom.url}">
        <i th:class="'mui-icon ' + ${buttom.icon}"></i>
        <p th:text="${buttom.text}"></p>
    </div>
</footer>
</body>
<script th:inline="javascript">
    //按钮切换模式
    let switchMode = [[${switchMode}]];

    //动态获取菜单url，所属iframe，jq对象等
    let buttoms = [];
    $(".huanzi-footer-buttom").each(function () {
        let iframeJqObject = {};
        if(switchMode === "1"){
            iframeJqObject = $("#iframe");
            //修改标签data-iframe值
            $(this).data("iframe","iframe");
        }else  if(switchMode === "2"){
            iframeJqObject = $("#"+$(this).data("iframe"));
        }
        let buttomobj = {
            jqObject:$(this),//按钮jq对象
            iframeJqObject:iframeJqObject,//所属iframe
            url:$(this).data("url")//url
        };
        buttoms.push(buttomobj);
    });

    //初始化所有页面
    buttoms.forEach((item,index)=>{
        item.iframeJqObject[0].src = ctx + item.url;
        item.iframeJqObject[0].onload = function () {
            //需要显示的页面进行标题修改等、其他不需要
            if(index === 0){
                iframeLoadFun(item.iframeJqObject[0]);
            }
            //重写onload事件
            item.iframeJqObject[0].onload = function (e) {
                iframeLoadFun(item.iframeJqObject[0]);
            };
        }
    });

    //默认显示第一个iframe
    buttoms[0].jqObject.addClass("select");
    showIframe(buttoms[0].iframeJqObject);

    //自适应高度
    adaptiveHeight();

    //底部按钮点击事件
    $(document).on("click", ".huanzi-footer-buttom", function (e) {
        //iframe动作
        let $iframe = $("#"+$(this).data("iframe"));
        if(switchMode === "1"){
            //立即加载初始化url
            $("#iframe")[0].src = ctx + $(this).data("url");
        }else if(switchMode === "2"){
            //判断是否要刷新
            if(!$iframe[0].src || $(".select").data("iframe") === $(this).data("iframe")){
                $iframe[0].src = ctx + $(this).data("url");
            }
        }
        //切换按钮、iframe
        buttoms.forEach((item,index,array)=>{
            item.jqObject.removeClass("select");
            hideIframe(item.iframeJqObject)
        });
        $(this).addClass("select");
        adaptiveHeight();
        //修改标题
        let title = $iframe.contents().attr("title");
        $("title").text(title);
        $(".mui-title").text(title);
        showIframe($iframe);
    });

    //切换iframe效果：显示
    function showIframe($iframe) {
        $iframe.animate({right:"0%"},"fast");
    }

    //切换iframe效果：隐藏
    function hideIframe($iframe) {
        $iframe.css("right","-100%");
    }

    //iframe onload事件
    function iframeLoadFun(iframe) {
        //修改标题
        let $mainFrame=$(iframe);
        let title = $mainFrame.contents().attr("title");

        $("title").text(title);
        $(".mui-title").text(title);

        //顶部进度条结束
        window.NProgress.done();
    }

    //自适应高度
    function adaptiveHeight(){
        $(".huanzi-content").css("top",$(".huanzi-header").css("height"));
        document.getElementById($(".select").data("iframe")).height = $('.huanzi-content').css("height");;
    }

    //h5端默认隐藏
    mui.plusReady(function(){
        //显示系统状态栏占高
        $(".huanzi-header .statusbar").css("display","block");

        //自适应高度
        adaptiveHeight();
    });

    mui.init({
        pullRefresh : {
            container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
            down : {
                style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
                height:'50px',//可选,默认50px.下拉刷新控件的高度,
                range:'100px', //可选 默认100px,控件可下拉拖拽的范围
                offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
                auto: false,//可选,默认false.首次加载自动上拉刷新一次
                callback :function(){ //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                    console.log("下拉刷新");
                }
            }
        }
    });
</script>
</html>